<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
    .ivu-card-head-inner, .ivu-card-head p{
    	height: 32px;
    }
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title">
                        <Input v-model="keyword" placeholder="请输入姓名搜搜..." style="width: 200px" />
                        <span @click="handleSearch3" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="handleCancel3" type="ghost" >取消</Button>
                    	<span style="margin: 0 10px;float: right;"><Button type="primary" icon="android-add" @click="add">新增</Button></span>
                    </p>
                    <Row :gutter="10">
                        <Col span="24">
                            <div>
                                <can-edit-table 
                                    refs="table4" 
                                    v-model="editInlineAndCellData" 
                                    @on-edit="edit"
                                    @on-details="details"
                                    @on-delete="deletes"
                                    :columns-list="editInlineAndCellColumn"
                                ></can-edit-table>
                                
                            </div>
                            
                        </Col>
					    <Modal v-model="modal1"
					        :title="getModelTital"
					        @on-ok="ok"
					        @on-cancel="cancel">
					        <Form :model="formItem">
						        <formItem label="场景名称:">
						            <Input style="width: 400px" v-model="formItem.scenesName" placeholder="请输入场景名称"></Input>
						        </formItem>
						        <formItem label="分数分值:">
						            <Input style="width: 400px" v-model="formItem.scenesScore" placeholder="请输入分数"></Input>
						        </formItem>
						        <FormItem label="场景类型:">
						            <RadioGroup v-model="formItem.scenesType">
						                <Radio label="0">场景</Radio>
						                <Radio label="1">路段</Radio>
						            </RadioGroup>
						        </FormItem>
						    </Form>
					    </Modal>
					    <Modal v-model="editModal1"
					        :title="getModelTital"
					        @on-ok="editOk"
					        @on-cancel="cancel">
					        <Form :model="formItem">
						        <formItem label="场景名称:">
						            <Input style="width: 400px" v-model="formItem.scenesName" placeholder="请输入场景名称"></Input>
						        </formItem>
						        <formItem label="分数分值:">
						            <Input style="width: 400px" v-model="formItem.scenesScore" placeholder="请输入分数"></Input>
						        </formItem>
						        <FormItem label="场景类型:">
						            <RadioGroup v-model="formItem.scenesType">
						                <Radio label="0">场景</Radio>
						                <Radio label="1">路段</Radio>
						            </RadioGroup>
						        </FormItem>
						    </Form>
					    </Modal>
                    </Row>
                    <div style="margin-top: 10px;overflow: hidden">
				        <div style="float: left;">
				            <Page :total="total" @on-change="PageNo" :page-size="pageSize" show-elevator ></Page>
				        </div>
				    </div>
                </Card>
            </Col>
        </Row>
    </div>  
</template>

<script>
import 'jquery';
import tableData from './fault_table_data.js';
import canEditTable from '../components/canEditTable.vue';
import {adminId,accessToken} from '../components/date.js';
import {baseurl} from '../../libs/util';

export default {
    name: 'editable-table',
    components: {
        canEditTable
    },
    data () {
        return {
        	keyword:'',
            tableData: [],
            editInlineAndCellColumn: [],
            editInlineAndCellData: [],
            modal1: false,
            editModal1:false,
	        formItem: {},
	        total: 1,
	        pageSize: 10,
	        flag: 'add'
        };
    },
    mounted:function(){
		this.team();
	},
	computed: {
	    getModelTital: function () {
	      return this.flag === 'add'?'添加场景':'修改场景';
	    }
  	},
    methods: {
    	team : function(pageNo){
    		pageNo = pageNo || 1;
    		var _self=this;
		  	$.ajax({
	  			url : baseurl+'v2/users/' + adminId + '/scenes/page',
				type : 'get',
				data:{
					"currentPage":pageNo,
					"keyword":_self.keyword,
					
				},
				dataType : 'json',
				success : function(data) {
					_self.dataObj = {}; 
					var result = data.result;
					_self.dataObj = result;
		            _self.editInlineAndCellData = _self.dataObj;
		            _self.total = data.totalNum;
				}
	  		});
		},
        getData () {
            this.tableData = tableData.table1Data;
            this.editInlineAndCellColumn = tableData.editInlineAndCellColumn;
        },
        //分页对应的页数
        PageNo (e) {
            console.log(e);
            this.team(e);
        },
        //新增
        add(e){
        	this.modal1 = true ;
        	this.flag ='add';
        },
        //编辑
        edit (e) {
        	this.flag ='';
        	this.editModal1 = true;
        	this.formItem = e;
        },
        details(data){
            this.$router.push({
                name: 'fault_detail',
                query: {
                	row:JSON.stringify(data),
                	scenesId: data.scenesId
                }
            });
        },
       	//删除
        deletes (e) {
        	var th=this;
            $.ajax({
	  			type: "DELETE",
	  			url:baseurl+'users/' + adminId + '/scenes/' + e.scenesId,
	  			async: false,
	  			dataType: 'json',
				contentType: "application/json; charset=utf-8",
	  			beforeSend: function(request) {
					request.setRequestHeader("accessToken", accessToken);
				},
				success: function(data) {
					
					if(data.code == 1){
						th.$Message.success('删除成功');
						th.team();//刷新
					}else{
						th.$Message.error('删除失败');
					}
				}
	  		});
        },
        //搜索
        handleSearch3 () {
        	this.team();
        },
        //取消
        handleCancel3 (i) {
        	this.keyword = '';
        	this.team();
        },
        //提交
        ok () {
        	console.log(this.formItem)
	  		var th = this;
	  		$.ajax({
	  			type: "POST",
	  			url:baseurl+'users/'+adminId+'/scenes',
	  			dataType: 'json',
	  			data: JSON.stringify(th.formItem),
	  			async: false,
				contentType: "application/json; charset=utf-8",
	  			beforeSend: function(request) {
					request.setRequestHeader("accessToken", accessToken);
				},
				success: function(data) {
					if(data.code == 1){
						th.$Message.success('更改成功');
						th.team();//刷新
						th.formItem = {}; 
					}else{
						th.$Message.error('更改失败');
					}
				}
	  		});
        },
        editOk(){
        	console.log(this.formItem)
        	var scenesId = this.formItem.scenesId;
	  		var th = this;
	  		$.ajax({
	  			type: "PUT",
	  			url:baseurl+'users/'+adminId+'/scenes/'+scenesId,
	  			dataType: 'json',
	  			data: JSON.stringify(th.formItem),
	  			async: false,
				contentType: "application/json; charset=utf-8",
	  			beforeSend: function(request) {
					request.setRequestHeader("accessToken", accessToken);
				},
				success: function(data) {
					if(data.code == 1){
						th.$Message.success('更改成功');
						th.team();//刷新
						th.formItem = {}; 
					}else{
						th.$Message.error('更改失败');
					}
				}
	  		});
        },
        cancel () {
            this.formItem = '';
        }
    },
    created () {
        this.getData();
    }
};
</script>
